<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>求职者管理</el-breadcrumb-item>
      <el-breadcrumb-item>求职者列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="求职者名/姓名"
            class="input-with-select"
            v-model="queryInfo.querystring"
            clearable
            @clear="getYonghulist"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getYonghulist"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- 求职者列表区域 -->
      <el-table :data="yonghulist" border stripe>
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="jobs" sortable label="岗位"> </el-table-column>
        <el-table-column prop="username" sortable label="求职者名">
        </el-table-column>
        <el-table-column prop="name" sortable label="姓名"> </el-table-column>
        <el-table-column prop="email" sortable label="邮箱"> </el-table-column>
        <el-table-column prop="mobile" sortable label="电话"> </el-table-column>
        <el-table-column prop="resume" sortable label="简历">
          <template slot-scope="scope">
            <a v-if="scope.row.resume" href="javascript:void(0);" @click="download(scope.row.resume)">下载</a>
            <a v-else>未上传简历</a>
          </template>
        </el-table-column>
        <el-table-column prop="reviewapply" sortable label="回复">
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog(scope.row.id)"
            ></el-button>
            <!-- 删除按钮-->
            <el-button type="danger" icon="el-icon-delete" size="mini" 
            @click="removeUserById(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!--修改求职者的对话框  -->
    <el-dialog
      title="修改求职者"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="求职者名" prop="username">
          <el-input v-model="editForm.username" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editForm.name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="editForm.mobile" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="回复" prop="reviewapply">
          <el-input v-model="editForm.reviewapply"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editYonghuInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {},
      //获取求职者列表的参数
      queryInfo: {
        querystring: '',
        pagenum: 1,
        pagesize: 2,
      },
      yonghulist: [],
      total: 0,
      editFormRules: {
        reviewapply: [
          { required: true, message: '请输入回复信息', trigger: 'blur' },
        ],
      },

      //控制修改求职者对话框的显示与隐藏
      editDialogVisible: false,
      //查询到的求职者信息对象
      editForm: {},
      resumeurl: '', //简历下载链接
      fileName: '', //简历下载路径
    }
  },
  created() {
    this.getYonghulist()
  },
  methods: {
    async getYonghulist() {
      this.user = JSON.parse(window.sessionStorage.getItem('user'))
      const { data: res } = await this.$http.get(
        'selectJobSeek/' + this.user.actorid,
        { params: this.queryInfo }
      )

      if (res.meta.status != 200) return this.$message.error(res.meta.msg)
      this.yonghulist = res.data.records
      console.log(this.yonghulist)
      this.total = res.data.total
    },
    //监听pagesize改变的事件
    handleSizeChange(newSize) {
      console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getYonghulist()
    },
    //监听页码值改变的数据
    handleCurrentChange(newPage) {
      //console.log(newPage);
      this.queryInfo.pagenum = newPage
      this.getYonghulist()
    },
    //监听添加求职者对话框的关闭事件
    addDialogClosed() {
      this.$refs.addFormRef.resetFields()
    },
    //展示求职者编辑的对话框
    async showEditDialog(id) {
      //console.log(id);
      const { data: res } = await this.$http.get('applyById/' + id)
      if (res.meta.status != 200) {
        return this.$message.error('获取信息错误')
      }
      this.editForm = res.data
      console.log(this.editForm);
      this.editDialogVisible = true
    },
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    },
    //修改求职者信息
    editYonghuInfo() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return
        //发起请求
        const { data: res } = await this.$http.put(
          'Updateapply/' + this.editForm.id,
          this.editForm
        )
        if (res.meta.status != 200) {
          this.$message.error('修改求职者信息失败')
        }
        this.editDialogVisible = false
        this.getYonghulist()
        this.$message.success('修改求职者信息成功')
      })
    },
    //下载
    async download(resume) {
      this.$http({
          // 用axios发送post请求
          method: 'post',
          // 请求地址
          url: 'apply/download?resume=' + resume,
        })
        .then((res) => {
          // 处理返回的文件流
          debugger
          const content = res.data
          const blob = new Blob([content])
          const fileName = resume
          if ('download' in document.createElement('a')) {
            // 非IE下载
            const elink = document.createElement('a')
            elink.download  = fileName
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            URL.revokeObjectURL(elink.href) // 释放URL 对象
            document.body.removeChild(elink)
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName)
          }
        })
    },
    //删除应聘信息
    async removeUserById(id){
      //弹窗
      const confirmResult =await this.$confirm('此操作将永久删除该应聘信息, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
      }).catch(err=>err)
      //如果应聘信息确定删除则返回字符串 confirm
      //如果应聘信息取消 则cancel
        if(confirmResult!='confirm'){
            return this.$message.info('已经取消删除')
        }
        console.log('确认删除');
        const {data:res}=await this.$http.delete('Deleteapply/'+id)
        if(res.meta.status!=200){
            return this.$message.error('删除应聘信息失败')
        }
        this.$message.success('删除应聘信息成功')
        this.getYonghulist()
      
    }
  },
}
</script>

<style lang="less" scoped>
</style>